import React from 'react'
import { List, InputItem, Button } from 'antd-mobile'
import './index.less'
import {getUrlParams} from 'UTIL/commonUtil';
import CommonHeader from 'COMPONENT/CommonHeader';
// ========================================
class Deposit extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
            ctype: ''
        };
    }
    componentWillMount () {
        let urlParams = getUrlParams();
        // console.log('urlParams:', urlParams, urlParams['ctype']);
        let ctype = urlParams['ctype'];
        if (!ctype) {
            this.setState({
                ctype: ''
            });
        } else {
            this.setState({
                ctype: ctype
            });
        }
    }
    render() {
        let inputs = [
            { title: '房源', txt: '运通花园', name: 'house' },
            { title: '租房人姓名', txt: '张三', name: 'varname' },
            { title: '租房人证件号码', txt: '3120398893****0983', name: 'idcard' },
            { title: '租期', txt: '1年', name: 'daterange' },
            { title: '起租日', txt: '2018-03-09', name: 'satrtdate' },
            { title: '付款周期', txt: '一月一付', name: 'moneyrange' },
            { title: '付款日', txt: '每月10号', name: 'moneydate' },
            { title: '租金（月）', txt: '2300元/月', name: 'rentmonth' },
            { title: '租金（合计）', txt: '27,600元', name: 'renttotal' },
            { title: '定金', txt: '3,000元', name: 'deposit' }
        ];
        let payArr = [
            { title: '已支付金额', txt: '4,000元', name: 'paytotal' },
            { title: '本次支付金额', txt: '4,000元', name: 'paytime' }
        ];
        let inputArr = [];
        if (!this.state.ctype) {
            inputArr = inputs;
        } else {
            inputArr = inputArr.concat(inputs, payArr);
        }
        return (
            <div id="deposit">
                <CommonHeader
                    name='信息填写'
                    leftContentTitle="@back"
                />
                <div style={{paddingTop: '45px'}}></div>
                <List>
                    {
                        inputArr.map((item) => {
                            return (
                                <InputItem editable={false} placeholder={item.title}
                                           value={item.txt}>
                                    {item.title}：
                                </InputItem>
                            )
                        })
                    }
                </List>
                {
                    !this.state.ctype ?
                        (
                            <div className="deposit-btnGroup">
                                <Button type="primary" className="deposit-btn">查看租约协议</Button>
                                <Button type="primary" className="deposit-btn">定金支付</Button>
                            </div>
                        )
                        :
                        (
                            <div className="deposit-btnGroup">
                                <Button type="primary" className="deposit-btn2">租金支付</Button>
                            </div>
                        )
                }
            </div>
        );
    }
}
// ========================================
export default Deposit;